<template>
    <div class="content">
        <h2>数据导入</h2>
        <div class="mainBox">
            <el-steps :active="active" finish-status="success">
            <el-step title="上传文件" />
            <el-step title="预览数据" />
            <el-step title="执行导入" />
            <el-step title="导入成功" />
            </el-steps>
        <el-button style="margin-top: 12px" @click="next">Next step</el-button>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)

const next = () => {
    if (active.value++ > 2) active.value = 0
}
</script>
<style scoped lang="scss">
.content {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    h2 {
        width: 100%;
        background-color: #f9f9f9;
        padding: 20px;
        box-sizing: border-box;
        color: #666666;
        font-weight: bold;
    }
    .mainBox{
        padding: 20px
    }
}
</style>